<template>
  <div class="login-box">
    <div class="bg" :style="isDark ? 'filter: invert(1);' : ''"></div>
    <el-card>
      <template #header>
        <div class="clearfix">教务管理系统</div>
      </template>
      <!--
      Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
      并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
      校验规则参见 async-validator

      !! ElForm 组件上必须将被校验的数据存储对象，以:model进行绑定
      !! 表单中的输入框绑定的变量必须是 某个对象中的属性
      -->
      <el-form ref="loginForm" :model="user" :rules="userRules">
        <el-form-item prop="username">
          <el-input
            placeholder="手机号码/用户名"
            prefix-icon="el-icon-user"
            v-model="user.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="登录密码"
            type="password"
            prefix-icon="el-icon-lock"
            v-model="user.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group size="mini" v-model="user.usertype">
            <el-radio-button :label="3">学生</el-radio-button>
            <el-radio-button :label="2">教师</el-radio-button>
            <el-radio-button :label="1">管理员</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doLogin()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import userRules from "../rules/userRules.js";
import { login, getMenu } from "../api/index.js";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        usertype: 1, // 1 管理员，2 老师，3 学生
      },
      // 定义校验规则
      //     Object.freeze 对象冻结 => 被冻结的对象只能使用，不能修改添加删除
      //     vue的底层代码会通过 Object.isExtensible 判断对象是否被冻结
      //     如果是冻结对象，会跳过该对象的递归响应式劫持 => 被冻结的对象没有了响应式
      //     Object.freeze进行对象冻结时，是需要递归进行操作的
      //     不要将 Object.freeze 方法直接写在data中,应该以模块的形式进行定义
      //     因为node模块在项目运行加载时只会执行一次
      // userRules: Object.freeze({
      //   username: [
      //     { required: true, message: "登录名不能为空", trigger: "blur" },
      //     { min: 3, message: "登录名最小长度为3", trigger: "blur" },
      //   ],
      //   password: [
      //     { required: true, message: "密码不能为空", trigger: "blur" },
      //     { min: 3, message: "密码不能为空", trigger: "blur" },
      //   ],
      // }),
      userRules: userRules,
    };
  },
  computed: {
    isDark: {
      get() {
        return this.$store.state.isDark;
      },
      set(nv) {
        this.$store.commit("setIsDark", nv);
      },
    },
  },
  methods: {
    async doLogin() {
      // 验证输入框的校验是否通过
      // this.$refs 记录了当前组件标签中被定义了 ref 属性的 标签DOM对象 或者 子组件实例对象
      //    情况1：如果ref被定义在普通的HTML标签上，获取的是该标签的DOM对象
      //    情况2：如果ref被定义在组件标签上，获取的是组件的实例对象
      //          通过获取组件实例对象，就可以直接调用对应组件的数据和方法
      // console.log(this.$refs.loginForm);

      // ElForm 组件实例对象中，提供了整个标签校验的方法 validate
      //        通过该方法可以激活整个标签的校验，且方法支持Promise
      //        如果校验通过，返回 成功状态，如果校验失败 返回失败状态；
      await this.$refs.loginForm.validate();

      // ajax请求
      let { data } = await login(this.user);
      this.$store.commit("setToken", data.token);
      this.$store.commit("setUser", data.user);

      let { data: menus } = await getMenu();
      this.$store.commit("setMenus", menus);

      // 跳转页面
      this.$router.push({
        name: "home",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-image: url("../assets/img/login-background4.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-card {
  width: 400px;
  z-index: 99;
}
.el-button {
  width: 100%;
}
.el-radio-group {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.el-radio-button {
  flex-grow: 1;
}
// VUE单文件组件中样式被设置为 scoped 时，当前组件的组件的样式只能对当前组件的标签生效
//    vue2提供三种样式深入生效规则，可以将当前组件的局部样式对子组件产生效果
//      1. >>> 深入样式
//      2. /deep/ 深入样式
//      3. ::v-deep 深入样式  （scss 生效）
// el-radio-button 组件内部的标签
::v-deep .el-radio-button__inner {
  width: 100%;
}
</style>
